<template>
  <div class="yun-page">
    <div class="yun-card" style="overflow: hidden">
      <img src="@/assets/img/maxbg.png" v-if='creenWidth>480' alt="" />
      <img src="@/assets/img/app/maxbg.png" v-if='creenWidth<480' alt="" />
      <div class="yun-card1">
        <h3 class="yun-title"><span>—</span>  <span>  Solidity Developer </span>  <span>—</span> </h3>
        <p class="yun-sbtitle"> WWe're seeking a Solidity Developer to work remotely.</p>

        <div class='yun-write'>
            <div class='yun-point1'>
              <img src="@/assets/img/points.png" alt="">
            </div>
            <div class='yun-point2'>
              <img src="@/assets/img/points.png" alt="">
            </div>
            <div class='yun-point3'>
              <img src="@/assets/img/points.png" alt="">
            </div>
            <div class='yun-write-card'>
              <div class='yun-head'>
                <span>Design </span>
                <span>Full-time</span>
                <span>Remote</span>
              </div>
              <div class='yun-btn'>
                <p>Send us an email to the email address below!</p>
                <p>cora@exploitnetwork.com</p>
              </div>
            </div>
            <div class="yun-write-cont">
            <p class="yun-p">
              Exploit Network is an energetic remote team located globally around the world. We are looking to hire awesome people that will help achieve our vision of making the development and use of blockchain applications as close as possible to their centralized counterparts.
            </p>
            <p class="yun-blue">
              Working with Exploit Network is awesome, how about a few perks?
            </p>
            <p>- Flexible work hours and location (remote).</p>
            <p>
              - Potential to be a big part of the project as it develops, own
              your work and contribute your visions and ideas.
            </p>
            <p>
              - Work with an enthusiastic team that likes to have fun and really
              cares about what we’re building.
            </p>
            <p>- Vacation days with no hard limits</p>
            <p>- Hardware subsidy</p>
            <p>- +More! Help build our culture.</p>

            <p class="yun-blue">What will you do?</p>
            <p>
              Exploit Network is looking for a talented, motivated blockchain
              engineer, specialized in Ethereum (Solidity). Presenting
              solutions, proof of concepts, and options to clients in a team
              setting for each project in a consultative environment. Work in
              internal Exploit Network tech development and external teams
              reporting up to a Project Lead when on assignment.
            </p>
            <p class="yun-blue">Suggested Requirements</p>
            <p class="yun-p">
              3+ years of software engineering experience developing highly
              reliable, scalable products and services
            </p>
            <p class="yun-p">
              - 2+ years of developing in blockchain using Ethereum (Solidity)
            </p>
            <p class="yun-p">
              - Strong experience with at least one modern coding language such
              as Python, Rust or C++
            </p>
            <p class="yun-p">- Good communication skills</p>
            <p class="yun-p">- Fluent English</p>
            <p class="yun-blue">Compensation</p>
            <p>
              We are looking for the best people that fit in our team. We are
              ready to pay a great salary to the right people!
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  components: {},
  data(){
    return {
      creenWidth: document.body.clientWidth,
    }
  }
};
</script>
<style lang='scss' scoped>
.yun-page {
  width: 100%;
  margin: 0 auto;
  &>img{
    width:100%;
  }
  .yun-card {
    width: 100%;
    position: relative;
    .yun-card1 {
      width: 1100px;;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .yun-title {
        font-size: 32px;
        font-weight: bold;
        color: #31313b;
        line-height: 40px;
        text-align: center;
        display: flex;
        justify-content: center;
        animation:runkey2 1s;
      }
      .yun-sbtitle {
        margin-top: 20px;
        font-size: 24px;
        color: #828282;
        line-height: 30px;
        text-align: center;
        animation:runkey2 2s;
      }
      .yun-write {
        margin-top: 240px;
        position: relative;
        background: #e2eff8;
        padding: 320px 40px 80px;
        font-size: 22px;
        font-weight: 400;
        color: #31313b;
        line-height: 52px;
        .yun-point1 {
          position: absolute;
          left: -180px;
          top: 45%;
          width: 160px;
          img {
            width: 100%;
          }
        }
        .yun-point2 {
          position: absolute;
          right: -115px;
          top: 5%;
          width: 160px;
          img {
            width: 100%;
          }
        }
        .yun-point3 {
          position: absolute;
          right: 240px;
          bottom: -80px;
          width: 160px;
          img {
            width: 100%;
          }
        }
        .yun-write-card {
          width: 900px;
          height: auto;
          background: #ffffff;
          border-radius: 10px;
          position: absolute;
          top: -70px;
          left: 50%;
          transform: translate(-50%);
          padding: 45px 80px;
          animation:runkey5 1s;
          .yun-head {
            display: flex;
            justify-content: space-between;
            font-size: 28px;
            font-weight: bold;
            color: #31313b;
          }
          .yun-btn {
            width: 600px;
            height: 100px;
            padding: 20px 40px;
            background: #404fe0;
            box-shadow: 0px 18px 38px 0px rgba(7, 17, 126, 0.3);
            border-radius: 8px;
            font-size: 24px;
            color: #ffffff;
            line-height: 32px;
            margin: 40px auto 0;
            cursor: pointer;
            text-align: center;
          }
        }
        .yun-blue {
          color: #404fe0;
          margin-top: 80px;
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .yun-page {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    .yun-card {
      width: 100%;
      position: relative;
      &>img{
        width:100%;
      }
      .yun-card1 {
        width: 96%;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translate(-50%, 0);
        .yun-title {
          font-size: 24px;
          font-weight: bold;
          color: #31313b;
          line-height: 72px;
          text-align: center;
          display: flex;
          justify-content: center;
        }
        .yun-sbtitle {
          margin-top: 10px;
          font-size: 18px;
          color: #828282;
          line-height: 24px;
          text-align: center;
        }
        .yun-write {
          margin: 100px auto 0;
          position: relative;
          background: #e2eff8;
          padding: 8rem 15px 20px;
          font-size: 14px;
          color: #31313b;
          line-height: 26px;
          width:96%;
          height:auto;
          .yun-point1 {
            position: absolute;
            left: -100px;
            top: 45%;
            width: 115px;
            img {
              width: 100%;
            }
          }
          .yun-point2 {
            position: absolute;
           right: -10px;
    top: -5%;
            width: 115px;
            img {
              width: 100%;
            }
          }
          .yun-point3 {
            position: absolute;
            right: 16%;
            bottom: -40px;
            width: 115px;
            img {
              width: 100%;
            }
          }
          .yun-write-card {
            width: 96%;
            height:auto;
            background: #ffffff;
            border-radius: 10px;
            position: absolute;
            top: -60px;
            left: 50%;
            transform: translate(-50%);
            padding: 15px 20px;
            .yun-head {
              display: flex;
              justify-content: space-between;
              font-size: 14px;
              font-weight: bold;
              color: #31313b;
            }
            .yun-btn {
              width: 80%;
              height: auto;
              padding: 10px 15px;
              background: #404fe0;
              box-shadow: 0px 18px 38px 0px rgba(7, 17, 126, 0.3);
              border-radius: 8px;
              font-size: 14px;
              color: #ffffff;
              line-height: 18px;
              margin: 30px auto 0;
              cursor: pointer;
              text-align: center;
            }
          }
          .yun-blue {
            color: #404fe0;
            margin-top: 30px;
          }
        }
      }
    }
  }
}
@keyframes runkey1{
   0%{
      opacity: 1;
      transform: scale(1);
   }
   50%{
      opacity: 0.8;
      transform: scale(1.1);
   }
   100%{
       opacity: 1;
       transform: scale(1);
   }
}
@keyframes runkey2{
   0%{
      transform: scale(0);
   }
   100%{
       transform: scale(1);
   }
}

@keyframes runkey3{
   0%{
       transform: translateY(0px);
   }
   50%{
     transform: translateY(-20px);
   }
   100%{
        transform: translateY(0px);
   }
}
@keyframes runkey4{
   0%{
       transform: scale(1);
   }
   50%{
     transform: scale(1.05);
   }
   100%{
        transform: scale(1);
   }
}
@keyframes runkey5{
   0%{
      top:40px;
   }
   100%{
      top:-150;
   }
}
</style>
